<template>
  <li class="timeline-item">
    <div class="timeline-item-tail"></div>
    <div class="timeline-item-head"></div>
    <div class="timeline-item-content">
      <slot />
    </div>
  </li>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'TimelineItem',
  inheritAttrs: true
})
const { offset: _offset } = inject<{offset: number}>("timeline_value")!
const offset = computed(() => `${_offset}px`)
</script>
<style lang="less" scoped>
@item-padding-bottom: 24px;
@head-size: 10px;
@head-color: var(--color-theme);
@head-bg-color: #ffffff;
@head-border-size: 2px;
@content-margin: 22px;
@content-inset-start: 0px;
@tail-size: 1px;
@tail-color: #CED4DB;
@tail-inset: 5px;
@tail-offset-top: 6px;
@tail-offset-bottom: 4px;
.timeline-item {
  --tail-offset: v-bind(offset);
  position: relative;
  margin: 0;
  padding: 0 0 @item-padding-bottom;
  list-style: none;
  box-sizing: border-box;
}

.timeline-item-tail {
  position: absolute;
  inset-block-start: calc(@head-size + @tail-offset-top + var(--tail-offset));
  inset-inline-start: @tail-inset;
  height: calc(100% - @head-size - @tail-offset-top - @tail-offset-bottom  - var(--tail-offset));
  border-inline-start: @tail-size dashed @tail-color;
}
.timeline-item-head {
  top: var(--tail-offset);
  position: absolute;
  width: @head-size;
  height: @head-size;
  background-color: @head-bg-color;
  border: @head-border-size solid @head-color;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeline-item-content {
  box-sizing: border-box;
  position: relative;
  inset-block-start: @content-inset-start;
  margin-inline-start: @content-margin;
  margin-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  word-break: break-word;
}
</style>